<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 渐变</title>
    <style>
        .box {
            height: 120px;
            width: 160px;
            display: inline-block;
            margin: 4px;
        }
        
        .box-01 {
            background: linear-gradient(yellow, red)
        }
        
        .box-02 {
            background: linear-gradient(to left, yellow, red)
        }
        
        .box-03 {
            background: linear-gradient(0deg, yellow, red)
        }
        
        .box-04 {
            background: linear-gradient(90deg, yellow, red)
        }
        
        .box-05 {
            background: linear-gradient(-90deg, yellow, red)
        }
        
        .box-06 {
            background: linear-gradient(to top left, yellow, red)
        }
        
        .box-2 {
            width: 320px;
        }
        
        .box-07 {
            background: linear-gradient(to left, yellow, red, blueviolet, greenyellow)
        }

        .box-3 {
            height: 120px;
            margin: 4px;
        }
        
        .box-08 {
            background: linear-gradient(to left, yellow, red 10%, blue 50%, green)
        }
        
        .box-09 {
            background: linear-gradient(to left, yellow 0, red 10%, blue 50%, green 100%)
        }
    </style>
</head>

<body>
    <div>
        <div class="box box-01">方向默认</div>
        <div class="box box-02">to left</div>
        <div class="box box-03">0度（自下向上）</div>
        <div class="box box-04">90度（逆时针90度）</div>
        <div class="box box-05">-90度（顺时针90度）</div>
        <div class="box box-06">to top left</div>
    </div>
    <div>
        <div class="box box-2 box-07">从右向左多色渐变</div>
    </div>
    <div class="box-3 box-08">从右向左多色渐变(yellow, red 10%, blue 50%, green)</div>
    <div class="box-3 box-09">从右向左多色渐变(yellow 0, red 10%, blue 50%, green 100%)</div>
</body>

</html>